<template>
    <div id='forget-view1'>
            <!-- 主要这个页面  以后可以在这个页面改 -->
            <div class='router-inner login-view'>

            <!-- wrapper begin -->
            <div class="wrapper">

                <header class="header">
                    <h1 class="header__title">通过邮箱找回密码</h1>
                    <!-- <h5 class="header__company">杭州联合银行</h5> -->
                </header>
                <div class="main">
                    <div class="login-form">
                        <ul class="login-form__input">
                            <li class='change-number' ref='gaoshi'></li>
                            <li class="login-form__item">
                                <i class='iconfont icon-user'></i>
                                <input @blur="submit()" v-model='username' type="text" placeholder="邮箱号">
                            </li>                            
                        </ul>
                        <div class="login-form__button" @click='tijiaoSubmit()'>
                            <button-loading :loading='loggingIn'> 提交 </button-loading>
                        </div>
                        <div  class='colorBlue' @click='goLast()'>
                           返回上一步
                        </div>
                    </div>
                </div>
            </div>
            <!-- wrapper end -->
            <footer-bar class='login-footer'></footer-bar>
        </div>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import { getOS } from '../utils/utils'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import datePicker from '../components/DatePicker.vue'
    import areaSelect from '../components/AreaSelect.vue'
    import radio from '../components/Radio.vue'
    import loading from '../components/Loading.vue'
    import tabBox from '../components/TabBox.vue'
    import tab from '../components/Tab.vue'
    import checkBox from '../components/CheckBox.vue'
    import checkBoxGroup from '../components/CheckBoxGroup.vue'
    import toolTip from '../components/ToolTip.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import dateFormat from '../filters/filter-dateFormat'
    import  {mapGetters, mapActions}  from 'vuex'
    import {addLenderValidation, resetAccountPasswordValidation, operatorEditValidation} from '../validation/validation'
    import {allApi} from '../api/api'
    import moment from 'moment'
    export default {
        components:{
            footerBar,
            selectGroup,
            selectOption,
            radioGroup,
            tabBox,
            tab,
            radio,
            checkBox,
            checkBoxGroup,
            areaSelect,
            loading,
            toolTip,
            modal,
            confirm,
            buttonLoading,
            pagination,
            datePicker,
            // AreaSelect
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip',
                'setMsgTipStyle',
                'setSessionId',
                'localInfo'
            ]),
            goLast(){
                // console.log(111222333)
                this.$router.go(-1)
            },
            submit(){
                let reg = /^([a-zA-Z0-9_-])+([.][a-zA-Z0-9_-]+)?@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/ ; //验证规则
                let testmoni=document.querySelector('.change-number')
                // let phoneNum = '15507621999';
                // console.log(reg.test(phoneNum))
                if(this.username&&this.username!=''){
                    if(reg.test(this.username)){
                        // this.$router.push({
                        //     name:'reset',
                        //     params:{
                        //         id:this.username
                        //     }
                        // })
                         testmoni.innerHTML=''
                    }else{
                        // console.log(testmoni)
                        testmoni.innerHTML='请输入正确的邮箱号'
                    }
                }else{
                        // console.log(testmoni)
                        testmoni.innerHTML='邮箱号不能为空'
                }
            },tijiaoSubmit(){
                let reg = /^([a-zA-Z0-9_-])+([.][a-zA-Z0-9_-]+)?@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/ ; //验证规则
                let testmoni=document.querySelector('.change-number')
                if(reg.test(this.username)){
                        // setTimeout(()=>{
                        //    return this.loggingIn=true 
                        // },10)
                        this.checkAccount()

                        // this.$router.push({
                        //     name:'reset',
                        //     params:{
                        //         id:this.username
                        //     }
                        // })
                    }
            },
            // 检测账户是否存在
            checkAccount(){
                this.loggingIn = true
                let params = {
                   account:this.username
                }
                allApi.checkAccount(params)
                .then(result => {
                    // console.log(result)
                    this.loggingIn = false
                    if(result.code==0){
                        this.$router.push({
                            name:'reset',
                            params:{
                                id:this.username
                            }
                        })
                    }
                    // if(result)
                  
                })
                .catch(error => {
                    console.error(error)
                    this.loggingIn = false
                })
            }
            
          
        },
        data() {
            return {
               username:'',
               loggingIn:false,
            }
        },
        computed:{
            ...mapGetters([
                'loading',
                'msgTip',
                'localInfo',
            ])
        },
        created(){

        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    #forget-view1{
         background-size: cover;
        color:#fff;
        // &:before{
        //     content:'';
        //     position: absolute;
        //     width: 100%;
        //     height:100%;
        //     top:0;
        //     left:0;
        //     background:url('../images/headbg_grey.jpg') no-repeat center center;
        //     background-size: cover;
        //     z-index:-2;
        // }
        // &:after{
        //     content:'';
        //     position: absolute;
        //     width: 100%;
        //     height:100%;
        //     top:0;
        //     left:0;
        //     background-color:rgba(#000,0.6);
        //     background-size: cover;
        //     z-index:-1;
        // }
        .wrapper{
            width: 100%;
            height:100%;
            padding-bottom:10px;
            box-sizing:border-box;
        }
        .header{
            padding-top:139px;
            text-align:center;
        }
        .header__title{
            @extend %weight-light;
            font-size: 26px;
        }
        .header__company{
            @extend %weight-light;
            font-size: 14px;
            color:$dark;
            padding-top:10px;
        }
        .main{
            padding-top:67px;
        }
        .login-form{
            width: 260px;
            margin:0 auto;
            position: relative;
        }
        .login-form__input{
            width: 100%;
            overflow:hidden;
            .iconfont{
                font-size:17px;
                color:$defaultColor;
                padding:0 12px;
            }
            input{
                flex:1;
                padding:16px 16px 16px 0;
                font-size: 15px;
            }
        }
        .login-form__item{
            display:flex;
            align-items:center;
            background-color: #FFF;
            margin-bottom:10px;
        }
        .login-form__button{
            .button{
                // padding: 13px 20px;
                font-size: 15px;
            }
        }
        .login-footer{
            position: absolute;
            bottom:10px;
        }
        .colorBlue{
            color:lightblue;
            cursor: pointer;
            text-align: center;
            margin: 20px 0;
        }
        li.change-number {
            width: 160px;
            position: absolute;
            top: 19px;
            left: 273px;
            cursor: pointer;
            color:#FF6E40;
        }
    }
</style>
